<template>
    <div class="layout">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                router
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item :index="'/note/'+item.path" v-for="item in $router.options.routes[2].children"
                          v-if="!item.isNotActive">
                {{item.name}}
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title">
                    <el-avatar :size="40" shape="square" :src="squareUrl"></el-avatar>
                </template>
                <el-menu-item>个人信息</el-menu-item>
                <el-menu-item index="/" @click="reLogin">注销登录</el-menu-item>
            </el-submenu>
        </el-menu>

        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Layout",
        data() {
            return {
                activeIndex: 'noteshelf',
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            };
        },
        methods: {
            reLogin() {
                this.$store.state.currentUser = ''
                this.$store.state.currentCategory = ''
                window.localStorage.setItem("userInfo", '')
            }
        }
    }
</script>

<style scoped>
    .el-submenu {
        position: absolute;
        right: 100px;
    }
</style>